<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
        }

        #accordion {
            width: 727px;
            height: 350px;
            margin: 100px auto 0 auto;
            position: relative;
            overflow: hidden;
            border: 1px solid #CCC;
        }

        #accordion ul {
            list-style: none;
        }

        #accordion ul li {
            width: 643px;
            height: 350px;
            position: absolute;
            background: #FFF;
        }

        #accordion ul li span {
            width: 20px;
            height: 350px;
            float: left;
            text-align: center;
            color: #FFF;
            padding-top: 5px;
            cursor: pointer;
        }

        #accordion ul li img {
            /*622  642  643px*/
            float: right;
        }

        .bar01 {
            left: 0px;
        }

        .bar02 {
            left: 643px;
        }

        .bar03 {
            left: 664px;
        }

        .bar04 {
            left: 685px;
        }

        .bar05 {
            left: 706px;
        }

        .bar01 span {
            background: #09E0B5;
        }

        .bar02 span {
            background: #3D7FBB;
        }

        .bar03 span {
            background: #5CA716;
        }

        .bar04 span {
            background: #F28B24;
        }

        .bar05 span {
            background: #7C0070;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // 获取所有的li设置点击事件
            $("#accordion li").click(function () {
                // 图         index       left
                // 01          0           21*0        
                // 02          1           21*1
                // 03          2           21*2
                // 04          3           21*3
                // 05          4           21*index
                $(this).animate({ left: 21 * $(this).index() });
                // 获取点击的li前面的所有的li
                var $prevAll = $(this).prevAll();


                $prevAll.each(function (index) {
                    // index在这里不能用
                    //   因为获取的是前面的元素 是倒着获取 所以这个参数的index不是在父级里的索引 是在集合里的

                    // $(this)是循环的每一个li
                    $(this).animate({ left: 21 * $(this).index() });
                });

                // 获取后面所有的元素
                var $nextAll = $(this).nextAll();

                $nextAll.each(function () {

                    // 图         index       left
                    // 02          1           727-21*(5-1)
                    // 03          2           727-21*(5-2)
                    // 04          3           727-21*(5-3)
                    // 05          4           727-21*(5-index)
                    // $(this)是循环的每一个li
                    $(this).animate({ left: 727-21*(5-$(this).index()) });
                });

            });

        });
    </script>
    <title>手风琴效果</title>
</head>

<body>
    <div id="accordion">
        <ul>
            <li class="bar01">
                <span>非洲景色01</span>
                <img src="./images/001-1.jpg" />
            </li>
            <li class="bar02">
                <span>非洲景色02</span>
                <img src="./images/001-2.jpg" />
            </li>
            <li class="bar03">
                <span>非洲景色03</span>
                <img src="./images/001-3.jpg" />
            </li>
            <li class="bar04">
                <span>非洲景色04</span>
                <img src="./images/001-4.jpg" />
            </li>
            <li class="bar05">
                <span>非洲景色05</span>
                <img src="./images/001-5.jpg" />
            </li>
        </ul>
    </div>
</body>

</html>